<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            display: inline-block;
            position: relative;
            cursor: pointer;
        }
        .span01,span02{
            width: 15px;
            height: 15px;
        }
        .radios,.checks{
            display: none;
        }

        .rad_1 {
            display: inline-block;
            width: 16px;
            height: 16px;
            border: 1px solid #fe6d32;
            border-radius: 50%;
            cursor: pointer;
        }
        input[type="radio"]:checked+label::after {
            position: absolute;
            content: "";
            width: 10px;
            height: 10px;
            background-color: #fe6d32;
            border-radius: 50%;
            top: 4px;
            left: 4px;
        }
        .check-1{
            display: inline-block;
            width: 16px;
            height: 16px;
            border: 1px solid #fe6d32;
            cursor: pointer;
            background-color: #fe6d32;
        }
        input[type="checkbox"]:checked+label::after {
            position: absolute;
            top: 2px;
            left: 5px;
            content: "";
            width: 5px;
            height: 10px;
            /*background-color: #fe6d32;*/
            border: 2px solid #fff;
            border-top: none;
            border-left: none;
            transform: rotate(45deg);
        }
    </style>
</head>
<body>
<form action="" method="get">
    你喜欢吃什么水果?<br>
    <p>
        <input type="radio" class="radios" name="kind" id="status_on1" value="1" checked="checked"/>
        <label for="status_on1" class="rad_1" data-id="1"></label>
        <span class="span01">苹果</span>
    </p>
    <p>
        <input type="radio" class="radios" name="kind" id="status_on2" value="2"/>
        <label for="status_on2" class="rad_1" data-id="2"></label>
        <span class="span01">橘子</span>
    </p>
    <p>
        <input type="radio" class="radios" name="kind" id="status_on3" value="3"/>
        <label for="status_on3" class="rad_1" data-id="3"></label>
        <span class="span01">梨</span>
    </p>
    <br>
    你喜欢吃什么水果?<br>
    <p>
        <input type="checkbox" class="checks" name="kind" id="check-01" value="1"/>
        <label for="check-01" class="check-1" data-id="3"></label>
        <span class="span02">苹果</span>
    </p>
    <p>
        <input type="checkbox" class="checks" name="kind" id="check-02" value="1"/>
        <label for="check-02" class="check-1" data-id="3"></label>
        <span class="span02">橘子</span>
    </p>
    <p>
        <input type="checkbox" class="checks" name="kind" id="check-03" value="1"/>
        <label for="check-03" class="check-1" data-id="3"></label>
        <span class="span02">梨</span>
    </p>
</form>
</body>
</html>